<template>
  <el-card>
    <el-form :model="updateform"
             status-icon
             ref="updateform">
      <el-descriptions size="small"
                       :column="1"
                       label-class-name="el-descriptions-item-label-class"
                       border>
        <el-descriptions-item label="任务名称">{{ updateform.name }}</el-descriptions-item>
        <el-descriptions-item label="任务描述">{{ updateform.description }}</el-descriptions-item>
        <el-descriptions-item label="集成模式">
          <span v-if="updateform.scheduleMode == 'MANUAL'">
            手动
          </span>
          <span v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'">
            定时
          </span>
        </el-descriptions-item>
        <el-descriptions-item v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'"
                              label="CRON表达式">{{ updateform.cronExpression }}
        </el-descriptions-item>
        <el-descriptions-item label="源端数据源">[{{ updateform.sourceConnectionId }}]
          {{ updateform.sourceConnectionName }}
        </el-descriptions-item>
        <el-descriptions-item label="源端schema">{{ updateform.sourceSchema }}</el-descriptions-item>
        <el-descriptions-item label="源端表类型">{{ updateform.tableType }}</el-descriptions-item>
        <el-descriptions-item label="源端表选择方式">
          <span v-if="updateform.includeOrExclude == 'INCLUDE'">
            包含表
          </span>
          <span v-if="updateform.includeOrExclude == 'EXCLUDE'">
            排除表
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="源端表名列表">
          <span
              v-show="updateform.includeOrExclude == 'INCLUDE' && (!updateform.sourceTables || updateform.sourceTables.length==0)"><b>所有物理表</b></span>
          <p v-for="item in updateform.sourceTables"
             v-bind:key="item">{{ item }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="目地端数据源">[{{ updateform.targetConnectionId }}]
          {{ updateform.targetConnectionName }}
        </el-descriptions-item>
        <el-descriptions-item label="目地端schema">{{ updateform.targetSchema }}</el-descriptions-item>
        <el-descriptions-item label="自动同步模式">
          <span v-if="updateform.autoSyncMode == 2">
            目标端建表并同步数据
          </span>
          <span v-if="updateform.autoSyncMode == 1">
            目标端只创建物理表
          </span>
          <span v-if="updateform.autoSyncMode == 0">
            目标端只同步表里数据
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="建表字段自增"
                              v-if=" updateform.autoSyncMode!==0 ">{{ updateform.targetAutoIncrement }}
        </el-descriptions-item>
        <el-descriptions-item label="表名转换方法"
                              v-if=" updateform.autoSyncMode!==0 ">
          <span v-if="updateform.tableNameCase == 'NONE'">
            无转换
          </span>
          <span v-if="updateform.tableNameCase == 'UPPER'">
            转大写
          </span>
          <span v-if="updateform.tableNameCase == 'LOWER'">
            转小写
          </span>
          <span v-if="updateform.tableNameCase == 'CAMEL'">
            下划线转驼峰
          </span>
          <span v-if="updateform.tableNameCase == 'SNAKE'">
            驼峰转下换线
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="列名转换方法"
                              v-if=" updateform.autoSyncMode!==0 ">
          <span v-if="updateform.columnNameCase == 'NONE'">
            无转换
          </span>
          <span v-if="updateform.columnNameCase == 'UPPER'">
            转大写
          </span>
          <span v-if="updateform.columnNameCase == 'LOWER'">
            转小写
          </span>
          <span v-if="updateform.columnNameCase == 'CAMEL'">
            下划线转驼峰
          </span>
          <span v-if="updateform.columnNameCase == 'SNAKE'">
            驼峰转下换线
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="数据批次大小"
                              v-if=" updateform.autoSyncMode!==1 ">{{ updateform.batchSize }}
        </el-descriptions-item>
        <el-descriptions-item label="通道队列大小"
                              v-if=" updateform.autoSyncMode!==1 ">{{ updateform.channelSize }}
        </el-descriptions-item>
        <el-descriptions-item label="同步操作方法"
                              v-if=" updateform.autoSyncMode!==1 ">{{ updateform.targetSyncOption }}
        </el-descriptions-item>
        <el-descriptions-item label="同步前置执行SQL脚本"
                              v-if=" updateform.autoSyncMode!==1 ">
          <span v-show="!updateform.beforeSqlScripts || updateform.beforeSqlScripts.length==0">[SQL脚本内容为空]</span>
          <span
              v-show="updateform.beforeSqlScripts && updateform.beforeSqlScripts.length>0">{{ updateform.beforeSqlScripts }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="同步后置执行SQL脚本"
                              v-if=" updateform.autoSyncMode!==1 ">
          <span v-show="!updateform.afterSqlScripts || updateform.afterSqlScripts.length==0">[SQL脚本内容为空]</span>
          <span
              v-show="updateform.afterSqlScripts && updateform.afterSqlScripts.length>0">{{ updateform.afterSqlScripts }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="表名映射规则">
          <span v-show="!updateform.tableNameMapper || updateform.tableNameMapper.length==0">[映射关系为空]</span>
          <table v-if="updateform.tableNameMapper && updateform.tableNameMapper.length>0"
                 class="name-mapper-table">
            <tr>
              <th>表名匹配的正则名</th>
              <th>替换的目标值</th>
            </tr>
            <tr v-for='(item,index) in updateform.tableNameMapper'
                :key="index">
              <td>{{ item['fromPattern'] }}</td>
              <td>{{ item['toValue'] }}</td>
            </tr>
          </table>
        </el-descriptions-item>
        <el-descriptions-item label="字段名映射规则">
          <span v-show="!updateform.columnNameMapper || updateform.columnNameMapper.length==0">[映射关系为空]</span>
          <table v-if="updateform.columnNameMapper && updateform.columnNameMapper.length>0"
                 class="name-mapper-table">
            <tr>
              <th>字段名匹配的正则名</th>
              <th>替换的目标值</th>
            </tr>
            <tr v-for='(item,index) in updateform.columnNameMapper'
                :key="index">
              <td>{{ item['fromPattern'] }}</td>
              <td>{{ item['toValue'] }}</td>
            </tr>
          </table>
        </el-descriptions-item>
      </el-descriptions>

    </el-form>
    <el-button type="primary"
               size="mini"
               icon="el-icon-arrow-left"
               @click="handleGoBack"
               style="margin: 12px 0px 20px;float: right">
      返回
    </el-button>
  </el-card>
</template>

<script>
export default {

  data() {
    return {
      updateform: {
        id: 0,
        name: "",
        description: "",
        scheduleMode: "MANUAL",
        cronExpression: "",
        sourceConnectionId: '请选择',
        sourceSchema: "",
        tableType: "TABLE",
        includeOrExclude: "",
        sourceTables: [],
        tableNameMapper: [],
        columnNameMapper: [],
        tableNameCase: 'NONE',
        columnNameCase: 'NONE',
        targetConnectionId: '请选择',
        targetDropTable: true,
        targetOnlyCreate: false,
        autoSyncMode: 2,
        targetSchema: "",
        batchSize: 5000,
        channelSize: 100,
        targetSyncOption: 'INSERT_UPDATE_DELETE',
        beforeSqlScripts: '',
        afterSqlScripts: '',
      },
      sourceConnection: {},
      targetConnection: {},
      sourceConnectionSchemas: [],
      sourceSchemaTables: [],
      targetConnectionSchemas: [],
    }
  },
  methods: {
    loadAssignmentDetail: function () {
      this.$http.get(
          "/dbswitch/admin/api/v1/assignment/detail/id/" + this.$route.query.id
      ).then(res => {
        if (0 === res.data.code) {
          let detail = res.data.data;
          let varAutoSyncMode = 2;
          if (detail.configuration.targetDropTable && detail.configuration.targetOnlyCreate) {
            varAutoSyncMode = 1;
          } else if (!detail.configuration.targetDropTable && !detail.configuration.targetOnlyCreate) {
            varAutoSyncMode = 0;
          } else {
            varAutoSyncMode = 2;
          }
          this.updateform = {
            id: detail.id,
            name: detail.name,
            description: detail.description,
            scheduleMode: detail.scheduleMode,
            cronExpression: detail.cronExpression,
            sourceConnectionId: detail.configuration.sourceConnectionId,
            sourceConnectionName: detail.configuration.sourceConnectionName,
            sourceSchema: detail.configuration.sourceSchema,
            tableType: detail.configuration.tableType,
            includeOrExclude: detail.configuration.includeOrExclude,
            sourceTables: detail.configuration.sourceTables,
            tableNameMapper: detail.configuration.tableNameMapper,
            columnNameMapper: detail.configuration.columnNameMapper,
            tableNameCase: detail.configuration.tableNameCase,
            columnNameCase: detail.configuration.columnNameCase,
            targetConnectionId: detail.configuration.targetConnectionId,
            targetConnectionName: detail.configuration.targetConnectionName,
            targetDropTable: detail.configuration.targetDropTable,
            targetOnlyCreate: detail.configuration.targetOnlyCreate,
            targetAutoIncrement: detail.configuration.targetAutoIncrement,
            autoSyncMode: varAutoSyncMode,
            targetSchema: detail.configuration.targetSchema,
            batchSize: detail.configuration.batchSize,
            channelSize: detail.configuration.channelSize,
            targetSyncOption: detail.configuration.targetSyncOption,
            beforeSqlScripts: detail.configuration.beforeSqlScripts,
            afterSqlScripts: detail.configuration.afterSqlScripts,
          }
          this.selectChangedSourceConnection(this.updateform.sourceConnectionId)
          this.selectUpdateChangedSourceSchema(this.updateform.sourceSchema)
          this.selectChangedTargetConnection(this.updateform.targetConnectionId)
        } else {
          if (res.data.message) {
            alert("查询任务失败," + res.data.message);
          }
        }
      });
    },
    selectChangedSourceConnection: function (value) {
      this.sourceConnection = this.connectionNameList.find(
          (item) => {
            return item.id === value;
          });

      this.sourceConnectionSchemas = [];
      this.$http.get(
          "/dbswitch/admin/api/v1/connection/schemas/get/" + value
      ).then(res => {
        if (0 === res.data.code) {
          this.sourceConnectionSchemas = res.data.data;
        } else {
          this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
          this.sourceConnectionSchemas = [];
        }
      });
    },
    selectUpdateChangedSourceSchema: function (value) {
      this.sourceSchemaTables = [];
      if ('TABLE' === this.updateform.tableType) {
        this.$http.get(
            "/dbswitch/admin/api/v1/connection/tables/get/" + this.updateform.sourceConnectionId + "?schema=" + value
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的物理表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      } else {
        this.$http.get(
            "/dbswitch/admin/api/v1/connection/views/get/" + this.updateform.sourceConnectionId + "?schema=" + value
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的视图表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      }
    },
    selectChangedTargetConnection: function (value) {
      this.targetConnection = this.connectionNameList.find(
          (item) => {
            return item.id === value;
          });

      this.targetConnectionSchemas = [];
      this.$http.get(
          "/dbswitch/admin/api/v1/connection/schemas/get/" + value
      ).then(res => {
        if (0 === res.data.code) {
          this.targetConnectionSchemas = res.data.data;
        } else {
          this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
          this.targetConnectionSchemas = [];
        }
      });
    },
    handleGoBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.loadAssignmentDetail();
  },
}
</script>

<style scoped>
.el-card {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.el-descriptions__body
.el-descriptions__table
.el-descriptions-row
.el-descriptions-item__label {
  min-width: 20px;
  max-width: 60px;
}
</style>